<template>
    <div class="right-img" @mouseover="iconfontnone" @mouseleave="iconfontnone1">
        <a href="#" title="关闭" :class="{ iconfontnone: !isnone }" @click="closeLink">
            <span class="iconfont icon-mtiIcon-caozuo-xiangyou2"></span>
        </a>
        <a href="#">
            <img :src="getAssetsFile(imgurl)" alt="">
        </a>
        <a href="#" @mouseover="spannone1" @mouseleave="spannone2">
            <span class="span123" :class="{ spannone: !spannone }">{{ spannone ? "广告" : "投放 广告" }}</span>
        </a>
    </div>
</template>

<script setup lang="ts">
import { getAssetsFile } from '@/util/utils';
import { ref, defineProps, defineEmits } from 'vue';

const props = defineProps({
    imgid: { type: Number, required: true },
    imgurl: { type: String, required: true }
});

const imgid = ref(props.imgid);
const imgurl = ref(props.imgurl);
const isnone = ref(false);
const spannone = ref(true);

const emit = defineEmits(['close']);

const closeLink = () => {
    emit('close', imgid.value);
};

const toggleIcon = (show: boolean) => {
    isnone.value = show;
};

const toggleSpan = (show: boolean) => {
    spannone.value = show;
};

const iconfontnone = () => {
    toggleIcon(true);
};

const iconfontnone1 = () => {
    toggleIcon(false);
};

const spannone1 = () => {
    toggleSpan(false);
};

const spannone2 = () => {
    toggleSpan(true);
};
</script>

<style lang="scss" scoped>
@import url(../../../assets/rightcontent/guanggao.scss);
</style>